<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简书</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        a{
            text-decoration: none;
        }
        body{
            background: #f1f1f1;
        }
        #body{
            width: 400px;
            height: 360px;
            margin: 100px auto;
            text-align: center;
            padding-top: 50px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 0 8px rgba(0,0,0,.1);
            vertical-align: middle;
        }
        .aa{
            display: inline-block;
            font-weight: 700;
            font-size: 20px;
            color: #969696;
            width: 60px;
            cursor: pointer;
            padding: 10px;
        }
        .aa:hover{
            font-weight: 700;
            color: #ea6f5a;
            border-bottom: 2px solid #ea6f5a;
        }
        .inputt img{
            width: 30px;
            height: 20px;
            vertical-align: middle;
            background-color: hsla(0,0%,71%,.1);
        }
        .inputt input{
            border: none;
            width: 230px;
            height: 40px;
            vertical-align: middle;
            background-color: hsla(0,0%,71%,.1);
            outline: none;
        }
        .inputt{
            border-radius:5px;
            background-color: hsla(0,0%,71%,.1);
            border: 1px solid #c8c8c8;
        }
        .den{
            margin-top: 20px;
            width: 100%;
            padding: 9px 18px;
            font-size: 18px;
            border: none;
            border-radius: 25px;
            color: #fff;
            background: #3194d0;
            cursor: pointer;
            outline: none;
            display: block;
            clear: both;
        }
         .shan{
             border-radius: 5px 5px 0 0;
         }
        .xia{
            border-radius:  0 0 5px 5px;
        }
        /*.kong{
            width:50px;
            height:50px;
            border:1px solid black;
        }*/
    </style>
</head>
<body>
<p style="color: #ea6f5a; font-size:50px;font-weight: 800; margin:30px" id="zhifou">知否</p>
<div id="body">
    <form action="" method="POST" id="frm">
        <div class="sb">
        <div class="haha">
        <!-- <span class="touxiang">头像</span>
        <div class="kong">
                        <input type="file" name="file" value="选择头像" accept="image/*">
                </div>   -->
        </div>
            <a href="#"  class="aa">注册</a><span style="margin: 0 10px">·</span><a href="#"  class="aa" >登录</a>
        </div>

        <div>
<ul>
<li class="sx" style="display: none">
        <!--注册-->
        <form action="" method="POST" id="frm1"  onsubmit="regist('frm1')" onsubmit="login('frm2')">
        <div style="  width:270px; margin: 40px auto 0 auto">
            <p class="inputt shan"><img src="wo.png" alt="" ><input type="text" placeholder="你的昵称" name="useName" ></p>
            <p class="inputt"  style="border-radius: 0"><img src="shou.png" alt="" ><input type="text" name="phone" placeholder="手机号"></p>
            <p class="inputt xia"><img src="suo.png" alt=""><input type="text" placeholder="设置密码" name="password"></p>
            <p><input type="file" id="zxc" value="选择头像" name="touXiang"></p>
            <p><input type="submit" value="注册"  class="den" style=" background: #42c02e; margin-bottom: 20px"
           ></p>
            <p style="color: #969696;     font-size: 12px;">点击“注册表示您同意并愿意遵守简书</p>
            <p style="color: #969696;     font-size: 12px;"><a href="#">用户协议</a>和<a href="#">隐私政策</a>。</p>
        </div>
        </form>
      </li>
   <li class="sx">
       <!--登陆-->
        <form  method="POST" id="frm2" >
       <div style="  width:270px; margin: 40px auto 0 auto">
           <p class="inputt shan"><img src="wo.png" alt="" ><input type="text" placeholder="用户名" name="userName"></p>
           <p class="inputt xia"><img src="suo.png" alt=""><input type="password" placeholder="密码" name="password"></p>
           <p style="margin-top:20px"><input type="checkbox" value="true">
           <span style="font-size: 15px; color: #969696; margin-right: 90px">记住我</span>
               <span><a href="#" style="color: #969696">登录遇到问题？</a></span></p>
           <p><input type="button" value="登录" onclick="login('frm2')"  class="den"></p>
       </div>
       </form>
   </li>
    
</ul>
        </div>
    </form>
</div>
</body>

<script>
function regist(id) {
       var f=new FormData(document.getElementById(id))     
        
       fetch('/Junior-Project_h1811/regist',{
        method:'POST',
        body:encodeURI(Array.from(f.entries()).map(el=>el.join('=')).join('&')),
        headers:{
            "Content-type": "application/x-www-form-urlencoded; charset=utf-8"
        }
    })
    .then(function (rrr) {
        return rrr.text();
    })
    .then(function (aaa) {
        console.log(aaa);
    });
return false;
            }

        function login(id) {
       var f=new FormData(document.getElementById(id))     
        
       fetch('/Junior-Project_h1811/login',{
        method:'POST',
        body:encodeURI(Array.from(f.entries()).map(el=>el.join('=')).join('&')),
        headers:{
            "Content-type": "application/x-www-form-urlencoded; charset=utf-8"
        }
    })
    .then(function (rrr) {
        return rrr.text();
    })
    .then(function (aaa) {
        console.log(aaa);
    });
return false;
            }



            

            

</script>
<script src="xxx.js"></script>
<script src="xxxx.js"></script>
</html>